<template>
  <view class="layout_box">
    <HeadNav page-name="添加标签" :borderType="true" :showNav="true"/>
    <Search @searchFn="searchFn" />
    <div class="title_msg_box">已添加标签（{{selectedLabel.length}}/2)</div>
    <ul class="tag_list_ul tag_list_ul_two" v-if="selectedLabel.length>0">
      <li class="tag_list_li tag_list_li_bg" v-for="(sLabel,sLabelIndex) in selectedLabel" :key="sLabelIndex">
        {{sLabel.name}}
        <img class="close_icon_box" @click.stop="removeSLabelFn(sLabel,sLabelIndex)" src="https://image.qqpyyds.com/mpAppImg/icon/error2_icon.png" alt=""></li>
    </ul>
    <div class="title_msg_box title_msg_box_two"><span>所有标签</span><em hover-class='hover' @click.stop="manageLabelFn">管理<img class="gt_icon_box" src="https://image.qqpyyds.com/mpAppImg/icon/jiantou2_icon.png" alt=""></em></div>
    <ul class="tag_list_ul">
      <li class="tag_list_li tag_list_li_add" hover-class='hover' @click.stop="addClassifyNameFn">+ 添加新标签</li>
      <li class="tag_list_li" :class="{'tag_list_li_bg':selectedLabel.includes(label)}" v-for="(label, labelIndex) in goodsLabelList" :key="labelIndex" @click.stop="choiceLabelFn(label,labelIndex)">
        {{label.name}}
        <img v-if="label.type==2&&manageType" class="close_icon_box" @click.stop="deleteLabelFn(label, labelIndex)" src="https://image.qqpyyds.com/mpAppImg/icon/error2_icon.png" alt="">
      </li>
    </ul>
    <div class="not_data_box">没有更多了~</div>
    <!-- 添加标签弹窗 -->
    <div class="fixed_box" v-if="classifyTypeShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">添加新标签</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="10" v-model.trim="classifyName" placeholder="请输入标签（最多10个字）"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="classifyTypeShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="addClassifyFn">确认添加</button>
        </div>
      </div>
    </div>
    <!-- 添加标签弹窗 -->
  </view>
</template>
<script>
import HeadNav from '@/components/headNav/index.vue'
import Search from '@/components/searchInput/index.vue'
import goodsApi from "@/api/goods.js"
export default {
  components: {
    HeadNav,
    Search
  },
  data() {
    return {
      goodsLabelList: [],
      manageType: false,
      classifyTypeShow: false,
      classifyName: '',
      routeData: {}
    }
  },
  onLoad(r) {
    this.routeData = r
    this.getGoodsLabelFn()
  },
  computed: {
    selectedLabel () {
      return this.$store.state.selectedLabel
    }
  },
  methods: {
    manageLabelFn () {
      let mun = 0
      this.goodsLabelList.forEach(item => {
        if (item.type == 2) {
          mun = mun+1
        }
      })
      if (mun<1) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '暂无可管理标签!'
        })
      }
      this.manageType=!this.manageType
    },
    getGoodsLabelFn (name) {
      let data = {}
      if (name) {
        data = {
          name: name || ''
        }
      }
      goodsApi.getGoodsLabel(data).then(async (res_) => {
        if (res_.code == 200) {
          let categoryArr = res_.data
          this.goodsLabelList = []
          this.goodsLabelList = [...categoryArr]
        }
      })
    },
    deleteLabelFn (data,index) {
      goodsApi.deleteLabel({id: data.id}).then(async (res_) => {
        if (res_.code == 200) {
          wx.showToast({
            icon: 'none',
            mask: true,
            title: '删除标签成功!'
          })
          this.goodsLabelList.splice(index,1)
        }
      })
    },
    removeSLabelFn (data,index) {
      let arr = this.$store.state.selectedLabel
      let operateData = this.$store.state.operateLabel
      let contrastData = this.$store.state.contrastLabel
      if (this.routeData.spuId) {
        contrastData.forEach((item,i)=>{
          if (item.id == data.id) {
            operateData.deleteArr.push(data)
          }
        })
      }
      let opArr = [...operateData.addArr]
      opArr.forEach((op,j)=>{
        if (op.id == data.id) {
          operateData.addArr.splice(j,1)
        }
      })
      this.$store.commit('OPERATE_LABEL', operateData)
      arr.splice(index,1)
      this.$store.commit('SELECTED_LABEL', arr)
    },
    choiceLabelFn (data,index) {
      let arr = this.$store.state.selectedLabel
      let mun =0
      arr.forEach(item => {
        if (item.id == data.id) {
          mun = mun+1
        }
      })
      if (mun>0) {
        return
      }
      if (arr.length>=2) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '最多只能添加两个标签!'
        })
      }
      let operateData = this.$store.state.operateLabel
      operateData.addArr.push(data)
      this.$store.commit('OPERATE_LABEL', operateData)
      arr.push(data)
      this.$store.commit('SELECTED_LABEL', arr)
    },
    addClassifyNameFn () {
      if (this.goodsLabelList.length>=50) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '最多可添加50个标签!'
        })
      }
      this.classifyName = ''
      this.classifyTypeShow = true
    },
    addClassifyFn () {
      if (!this.classifyName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请添加标签名称!'
        })
      }
      goodsApi.addLabel({name: this.classifyName}).then(async (res_) => {
        if (res_.code == 200) {
          wx.showToast({
            icon: 'none',
            mask: true,
            title: '添加标签成功!'
          })
          this.goodsLabelList.push({name: this.classifyName,id:res_.data,type:2})
          this.classifyTypeShow = false
        }
      })
    },
    searchFn (e) {
      console.log(e)
      this.getGoodsLabelFn(e)
    }
  }
}
</script>
<style lang="scss" scoped>
.layout_box {
  width: 100vw;
  min-height: 100vh;
  background-color: #F2F3F5;
  .title_msg_box {
    background-color: #fff;
    font-size: 32rpx;
    padding: 24rpx 32rpx;
    color: rgba(0,0,0,0.90);
    font-weight: 500;
    line-height: 48rpx;
    border-bottom: 2rpx solid #eee;
    &.title_msg_box_two {
      display: flex;
      justify-content: space-between;
      align-items: center;
      em {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        color: rgba(0,0,0,0.30);
        .gt_icon_box {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
  .tag_list_ul {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    padding: 32rpx 32rpx 0rpx 32rpx;
    &.tag_list_ul_two {
      border-bottom: 2rpx solid #eee;
    }
    .tag_list_li {
      padding: 8rpx 24rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      background-color: #f2f3f5;
      color: rgba(0,0,0,0.60);
      font-weight: 400;
      position: relative;
      margin-right: 16rpx;
      margin-bottom: 32rpx;
      &:last-child {
        margin-right: 0rpx;
      }
      &.tag_list_li_bg {
        background-color: #ffe5de;
        color: #E44435;
      }
      &.tag_list_li_add {
        color: #E44435;
        border: 2rpx solid #E44435;
        background-color: #fff;
      }
      .close_icon_box {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: -16rpx;
        right: -16rpx;
      }
    }
  }
  .not_data_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28rpx 0;
    font-size: 24rpx;
    color: rgba(0,0,0,0.60);
    line-height: 32rpx;
    font-weight: 400;
  }
}
</style>